<template>
  <div class="spell-one-word">
    <h4 class="spell-title">示例学习</h4>
    <div class="spell-container">
      <div class="spell-scorll-container" :style="`transform: translateX(${-index * 920}px);`" v-loading="!wordList.length">
        <SpellStudyWordItem v-for="(wordData, index) in wordList" :key="wordData.id" :wordData="wordData"
          :spellId="spellId" @recordedData="(data, blob) => {
              recordedData(data, index, blob);
            }
            " ref="spell-study-item"></SpellStudyWordItem>
      </div>
      <div>
        <el-button style="float: right;" type="primary" @click="goNextGroup">下一组</el-button>
      </div>
      <button v-if="isShowNext" type="button" class="el-carousel__arrow el-carousel__arrow--right" @click="goNext">
        <i class="el-icon-arrow-right"></i>
      </button>
    </div>
  </div>
</template>
<script>
import SpellStudyWordItem from "./SpellStudyWordItem.vue";
import { getNaturalSpellWord } from "@/api/naturalSpell";
export default {
  data() {
    return {
      wordList: [],
      index: 0,
      isShowNext: false,
    };
  },
  props: {
    spellId: {
      type: Number,
    },
  },
  watch: {
    "$route.query.checkedTypeId"(newVal, oldVal) {
      this.getNaturalSpellWord();
    },
  },
  methods: {
    recordedData(data, index, blob) {
      let wordData = this.wordList[index];
      this.$set(wordData, "score", data.score);
      this.$set(wordData, "result", data.context.lines[0].words[0]);
      this.$set(wordData, "isAnswer", true);
      this.$set(wordData, "fileData", window.URL.createObjectURL(blob));
      this.setIsShowNext(true);
      let isAnswerAll = this.wordList.every((item) => {
        return item.isAnswer;
      });
      if (isAnswerAll) {
        this.$emit("goNextStep");
      }
    },
    goNextGroup(){
      let arr =JSON.parse(localStorage.getItem("spellCheckeWordlist"))
      let index= arr.findIndex(item=>item.id==this.spellId)
      if(index>=arr.length-1){
        this.$confirm('该模块已经学习完毕,是否返回学习中心?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          this.$goRouter('naturalSpellCenter', this.$route.query)
        }).catch(() => {
          console.log('停留当前模块');         
        });
        return
      }
      let { checkedTitle } = this.$route.query
      let {source}=arr[index+1]
      localStorage.setItem(
        "spellCheckedData",
        JSON.stringify(arr[index+1])
      );
      this.$goRouter("spellStudy", {
        checkedTypeId: arr[index+1].id,
        checkedTitle,
        source
      });
    },
    goNext() {
      if (this.index >= this.wordList.length - 1) {
        return;
      }
      this.index++;
      this.setIsShowNext(false);

      this.$refs["spell-study-item"].forEach((item) => {
        item.pauseRecord();
      });
    },
    setIsShowNext(data) {
      if (data) {
        if (this.index >= this.wordList.length - 1) {
          return;
        }
      }
      this.isShowNext = data;
    },
    getNaturalSpellWord() {
      let params = {
        id: this.spellId,
        classify: 1,
      };
      getNaturalSpellWord(params).then((res) => {
        if (res.code == 200) {
          res.data.forEach((item) => {
            if (item.detail) {
              let data = JSON.parse(item.detail);
              console.log(data,"data");
              item.result = data.lines[0].words[0];
            }
          });
          this.wordList = res.data;
        } else {
          this.$emit("goNextStep");
        }
      });
    },
  },
  created() {
    this.getNaturalSpellWord();
  },
  components: {
    SpellStudyWordItem,
  },
};
</script>